<template>
  <div class="perm-container">
    <el-card class="box-card" shadow="always">
      <div class="clearfix" slot="header">
        <b>{{ menuName }}{{type==1?'路由权限':'按钮权限'}}</b>
      </div>

      <!-- 搜索表单 -->
      <el-form :inline="true" :model="queryParams" ref="queryForm">
        <el-form-item label="权限名称">
          <el-input @keyup.enter.native="handleQuery" clearable placeholder="请输入权限名称" v-model="queryParams.name" />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery" icon="el-icon-search" type="primary">搜索</el-button>
          <el-button @click="handleReset" icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>

      <div class="mb-20">
        <el-button :disabled="disabled" @click="handleAdd" icon="el-icon-plus" type="success">新增</el-button>
        <el-button :disabled="multiple" @click="handleDelete" icon="el-icon-delete" type="danger">删除</el-button>
      </div>

      <!-- 数据表格 -->
      <el-table :data="pageList" @selection-change="handleSelectionChange" border ref="table" v-loading="loading">
        <el-table-column align="center" type="selection" />
        <el-table-column label="权限名称" prop="name" />
        <el-table-column label="权限标识" prop="perm" />
        <el-table-column label="类型" width="100">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.type==1">路由</el-tag>
            <el-tag type="primary" v-if="scope.row.type==2">按钮</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="180">
          <template slot-scope="scope">
            <el-button @click="handleUpdate(scope.row)" circle icon="el-icon-edit" plain type="primary" />
            <el-button @click="handleDelete(scope.row)" circle icon="el-icon-delete" plain type="danger" />
          </template>
        </el-table-column>
      </el-table>

      <pagination
        :limit.sync="pagination.size"
        :page.sync="pagination.current"
        :total="pagination.total"
        @pagination="handleQuery"
        v-show="pagination.total>0"
      />

      <el-dialog :title="dialog.title" :visible.sync="dialog.visible" width="500px">
        <el-form :model="form" :rules="rules" label-width="80px" ref="form">
          <el-form-item label="所属模块">
            <el-input readonly v-model="menu.name"></el-input>
          </el-form-item>

          <el-form-item label="权限名称" prop="name">
            <el-input placeholder="请输入权限名称" v-model="form.name" />
          </el-form-item>

          <el-form-item label="权限标识" prop="perm">
            <el-input :placeholder="(type==1?'/system/users/**':'add')" v-model="form.perm" />
          </el-form-item>
        </el-form>
        <div class="dialog-footer" slot="footer">
          <el-button @click="handleSubmit" type="primary">确 定</el-button>
          <el-button @click="dialog.visible=false">取 消</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import Api from '../api'
export default {
  name: 'permission',
  props: ['type'],
  data() {
    return {
      loading: false,
      ids: [],
      single: true,
      multiple: true,
      queryParams: {
        queryMode: '0',
        name: undefined,
        menuId: undefined,
        type: undefined
      },
      pagination: {
        current: 1,
        size: 10,
        total: 0
      },
      pageList: [],
      dialog: {
        title: undefined,
        visible: false
      },
      form: {},
      rules: {
        name: [
          { required: true, message: '请输入权限名称', trigger: 'blur' }
        ],
        perm: [
          { required: true, message: '请输入权限标识', trigger: 'blur' }
        ]
      },
      disabled: true,
      menu: {},
      menuName: undefined
    }
  },
  methods: {
    handleQuery() {
      this.queryParams.current = this.pagination.current
      this.queryParams.size = this.pagination.size

      this.queryParams.menuId = this.menu.id
      this.queryParams.type = this.type

      Api.getPermissionList(this.queryParams).then(response => {
        this.pageList = response.data
        this.pagination.total = response.total
        this.loading = false
      })
    },
    handleReset() {
      this.pagination = {
        current: 1,
        size: 10,
        total: 0
      }
      this.queryParams.name = undefined
      this.handleQuery()
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    handleAdd() {
      this.resetForm()
      this.dialog = {
        title: '新增权限',
        visible: true
      }
    },

    handleUpdate(row) {
      this.resetForm()
      this.dialog = {
        title: '修改权限',
        visible: true
      }
      const id = row.id || this.ids
      Api.getPermissionDetail({ id }).then(response => {
        this.form = response.data
      })
    },

    handleSubmit: function () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.form.type = this.type
          this.form.menuId = this.menu.id
          Api.addOrUpdatePermission(this.form).then(() => {
            this.$message.success(this.form.id ? '修改成功' : '新增成功')
            this.closeDialog()
            this.handleQuery()
          })
        }
      })
    },

    handleDelete(row) {
      const ids = [row.id || this.ids].join(',')
      this.$confirm('确认删除已选中的数据项？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        Api.removePermissions({ ids }).then(() => {
          this.$message.success('删除成功')
          this.handleQuery()
        })
      }).catch(() =>
        this.$message.info('已取消删除')
      )
    },
    closeDialog() {
      this.resetForm()
      this.dialog = {
        title: undefined,
        visible: false
      }
    },
    resetForm() {
      this.form = {
        type: this.type,
        menuId: this.menu.id
      }
      if (this.$refs.form) {
        this.$refs.form.resetFields()
      }
    },
    menuClick(row) {
      this.disabled = false
      this.menu = row
      this.menuName = '【' + this.menu.name + '】'
      this.handleQuery()
    },
    resetPermission() {
      this.disabled = true
      this.pageList = []
      this.queryParams.menuId = undefined
      this.menu = {}
      this.menuName = undefined
    }
  }
}
</script>

<style scoped>
.perm-container {
  margin-bottom: 20px;
}
</style>
